<template>
  <div style="width:100%;height:100%;display: block;" class="paimingzhanbi">
    <div class="pmzb-box" ref="paimingzhanbi">
    </div>
    <p class="title">单位:万元</p>
  </div>


</template>

<script>
  export default {
    name: 'paimingzhanbi',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {

      this.getEchartData()
    },
    methods: {
      getEchartData() {
        const chart1 = this.$refs.paimingzhanbi;
        if (chart1) {
          const myChart = this.$echarts.init(chart1)
          var that = this;

          const option = {

            series: [{
              startAngle:'30',
              type: 'pie',
              radius: ['15%', '28%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'center'
              },
              minAngle: '60',
              label: {
                show: true,
                position: 'outside',
                formatter: '{b|{b}}\n{hr|}\n{per|{d}%}',
                rich: {
                  b: {
                    color: '#00ffff',
                    lineHeight: 22,
                    align: 'center',
                    padding:[2,0],
                    fontSize: 12,
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0,
                    margin:[2,3]
                  },
                  per: {
                    color: '#fff',
                    fontSize: 14,
                    padding: [2, 4]
                  }
                }


              },
              labelLine: {
                show: true
              },
              data: [{
                  value: 1420853,
                  name: '郑州',
                  itemStyle: {
                    color: '#00ffff',
                  }

                },
                {
                  value: 206228,
                  name: '南宁',
                  itemStyle: {
                    color: '#f39800',
                  }
                },
                {
                  value: 347,
                  name: '内蒙古',
                  itemStyle: {
                    color: '#0ae8a4',
                  }
                }
              ]
            }]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      }
    }
  }
</script>

<style>
  .paimingzhanbi {
    width: 100%;
    height: 100%;
    display: block;
  }

  .pmzb-box {
    height: 100%;
    width: 100%;
    display: block;
  }
  .paimingzhanbi{
   position: relative;
  }
  .paimingzhanbi .title{
    position: absolute;
    right:0;
    bottom:.5rem;
    color:#01cfd9;
    font-size:.1rem;
  }
</style>
